<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>邮件查看</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="bg-white mt-[10px]">
        <BaseHead style="border-bottom: 0">邮件信息</BaseHead>
        <BaseTable>
          <tr>
            <td class="td-name">标题</td>
            <td colspan="3" style="width: 87.5%">{{ detailData.title }}</td>
          </tr>
          <tr>
            <td class="td-name">接收人</td>
            <td colspan="3">{{ detailData.receiverName }}</td>
          </tr>
          <tr>
            <td class="td-name">内容</td>
            <td colspan="3" v-html="detailData.content"></td>
          </tr>
          <tr>
            <td class="td-name">发件人</td>
            <td colspan="3">{{ detailData.senderName }}</td>
          </tr>
        </BaseTable>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/project/components/BaseTable.vue";
import { getMessageDetail } from "@/api/project/xj/xmps";
const dialogVisible = ref(false);
const operateId = ref(null);
const detailData = ref({});
//获取记录详情
const getDetail = async () => {
  try {
    const params = {
      msgId: operateId.value,
    };
    const res = await getMessageDetail(params);
    detailData.value = res.data;
  } catch (error) {
    console.log(error);
  }
};
//查看
const view = (id) => {
  dialogVisible.value = true;
  operateId.value = id;
  getDetail();
};
defineExpose({ view });
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
